{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

<div class="widget-main">
        <div class="widget-body">
            <div class="row widget-main">
            <div class="col-lg-12 col-sm-3 col-xs-6">
                <label>查看后台数据权限</label>
                {% for key,role in dataRole %}
                <label class="radio-inline">
                    <input type="radio" class="ace" name="user_type" {% if key == userType %} checked="checked" {% endif %} value="{{ key }}" /><span class="lbl">{{ role }}</span>
                </label>
                {% endfor %}
            </div>
            </div>
        </div>
        {% if roleGrade < 2 %}
        <div class="row widget-main">
            <label  for="user_queues" class="col-sm-1 control-label no-padding-right">管理技能组</label>
            <div class="col-sm-9">
                <select id="user_queues" name="user_queues[]" class="col-xs-10 col-sm-4 multiple-select"  multiple="multiple">
                    <option value="-1" {% if -1 in userQueues %}selected="selected"{% endif %}>所属技能组</option>
                    {% for key,queue in queues %}
                    <option value="{{ key }}" {% if key in userQueues %}selected="selected"{% endif %}>{{ queue }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        {% if isEnableGroup %}
        <div class="row widget-main">
            <label  for="user_groups" class="col-sm-1 control-label no-padding-right">管理业务组</label>
            <div class="col-sm-9">
                <select id="user_groups" name="user_groups[]" class="col-xs-10 col-sm-4 multiple-select" disabled="disabled" multiple="multiple">
                    {% for key,queue in groups %}
                        <option value="{{ key }}" {% if key in userGroups %}selected="selected"{% endif %}>{{ queue }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        {% endif %}
        {% endif %}
</div>

<div class="widget-toolbox padding-8 clearfix">
    {{ button('Save Config', 'save-data-authority', 'fa-save', 'btn-info') }}
</div>

<script type="application/javascript">
    $(document).ready(function (){
        $('.multiple-select').multiSelect({
            selectableHeader:"<div class='custom-header'>{{ 'Selectable'|trans }}</div>",
            selectionHeader:"<div class='custom-header'>{{ 'Selected'|trans }}</div>",
            cssClass:"col-xs-10 col-sm-5"
        });
        fn_date({{ userType }});
        {% if isEnableGroup %}
        {% if userType is defined and userType == 3 %}
        $("#user_queues").parent().parent().addClass('hidden');
        {% else %}
        $("#user_groups").parent().parent().addClass('hidden');
        {% endif %}
        {% endif %}
        $("input:radio[name='user_type']").on("click", function(){
            var val = $(this).val();
            fn_date(parseInt(val));
        })
    });

    function fn_date(val)
    {
        switch(val)
        {
            case 0:
                $('#user_queues').attr("disabled",'disabled');
                $('#user_queues').multiSelect("refresh");
            {% if isEnableGroup %}
                $('#user_groups').attr("disabled",'disabled');
                $('#user_groups').multiSelect("refresh");
            {% endif %}
                break;
            case 1:
            {% if isEnableGroup %}
                $("#user_groups").parent().parent().addClass('hidden');
                $("#user_queues").parent().parent().removeClass('hidden');
            {% endif %}
                $('#user_queues').removeAttr("disabled");
                $('#user_queues').multiSelect("refresh");
                break;
            case 2:
                $('#user_queues').attr("disabled",'disabled');
                $('#user_queues').multiSelect("refresh");
            {% if isEnableGroup %}
                $('#user_groups').attr("disabled",'disabled');
                $('#user_groups').multiSelect("refresh");
            {% endif %}
                break;
                {% if isEnableGroup %}
            case 3:
                $("#user_queues").parent().parent().addClass('hidden');
                $("#user_groups").parent().parent().removeClass('hidden');
                $('#user_groups').removeAttr("disabled");
                $('#user_groups').multiSelect("refresh");
                break;
                {% endif %}
        }
    }

    /** 保存配置 */
    $('#save-data-authority').on('click', function () {
        if (click_id=="") {
            $.gritter.add({
                title: '{{ 'Prompt'|trans }}',
                text: '{{ 'You did not select any role cannot perform this operation'|trans }}!',
                class_name: 'gritter-error'
            });

            return false;
        }

        $("#save-data-authority").attr('disabled', true);
        var data_info = {};
        data_info['user_type'] = $('input[name="user_type"]:checked').val();
        data_info['user_queues'] = $("#user_queues").val();
        data_info['user_groups'] = $("#user_groups").val();
        if (data_info['user_type'] == 1) {
            if(data_info['user_queues'] == null) {
                alert('{{ 'Add at least one queue'|trans }}');
                $("#save-data-authority").attr('disabled', false);
                return
            }
        }
        if (data_info['user_type'] == 3) {
            if(data_info['user_groups'] == null) {
                alert('{{ 'Add at least one group'|trans }}');
                $("#save-data-authority").attr('disabled', false);
                return
            }
        }
        $.ajax({
            url: '{{ path("icsoc_security_role_data_authority") }}',
            dataType: 'json',
            type: 'post',
            data: {data_info: JSON.stringify(data_info), roleId:click_id},
            success: function (response) {
                $("#save-data-authority").attr('disabled', false);
                if (response.code != 200) {
                    $.gritter.add({
                        title: '{{ 'Prompt'|trans }}',
                        text: response.message,
                        class_name: 'gritter-error'
                    });
                } else {
                    $.gritter.add({
                        title: '{{ 'Prompt'|trans }}',
                        text: '{{ 'Add success'|trans }}',
                        class_name: 'gritter-success'
                    });
                }
            }
        });
    });
</script>
<style>
    .custom-header{
        text-align: center;
        padding: 3px;
        background: #E5E5E5;
    }
</style>